<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center groupBureau_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub groupBureau_fd0_0'>
          <view class='flex flex-wrap align-center groupBureau_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  groupBureau_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='groupBureau_fd0_0_c1_c0'>组个局</text>
          </view>
          <view class='flex flex-wrap align-center justify-end groupBureau_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout groupBureau_flex_1">
        <view class='flex flex-wrap align-center'>
          <benben-input class='flex-sub groupBureau_fd1_0_c0' type="text" :placeholder="`标题`" confirm-type="done"
            :maxlength="25" placeholder-style="color:rgba(191, 191, 191, 1);font-size:36rpx"
            v-model="organizationalDetails.title" />
        </view>
        <view class='flex flex-wrap align-center groupBureau_fd1_1'>
          <view class='flex flex-wrap groupBureau_fd1_1_c0'>
            <textarea class='flex groupBureau_input_fd1_1_c0' :placeholder="'需求内容...'" :maxlength="240"
              placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx"
              v-model="organizationalDetails.content" />

          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout groupBureau_flex_2">
        <view class='flex flex-wrap align-center groupBureau_fd2_0' @tap.stop="pickerDiy1705107659630=true">
          <text class='groupBureau_fd2_0_c0'>组局类型<text class="text-red">*</text></text>
          <view class='flex flex-wrap align-center justify-end flex-sub'>
            <benben-input class='flex-sub groupBureau_fd2_0_c1_c0' type="text" :placeholder="`请选择`" confirm-type="done"
              :maxlength="-1" :disabled='true' placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx"
              v-model="organizationalDetails.postofficecate_cate_name" />
            <image class='groupBureau_fd2_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"73.png"'></image>
          </view>
        </view>
        <view class='flex flex-wrap align-center groupBureau_fd2_0' @click.stop="pickerDiy1705108003558=true">
          <text class='groupBureau_fd2_0_c0'>组局时间<text class="text-red">*</text></text>
          <view class='flex flex-wrap align-center justify-end flex-sub'>
            <view class="class='flex-sub groupBureau_fd2_0_c1_c0'"
              :class="organizationalDetails.office_time? '' : 'text-999'">{{organizationalDetails.office_time || '请选择'}}
            </view>

            <image class='groupBureau_fd2_0_c1_c1' mode="aspectFit" :src='STATIC_URL+"73.png"'></image>
          </view>
        </view>
        <view class='flex flex-wrap align-center groupBureau_fd2_0' @tap.stop="chooseLocation" data-type="navigateTo"
          :data-url="`/pages/fabu/chooseLocation/chooseLocation`">
          <text class='groupBureau_fd2_0_c0'>组局地点</text>
          <view class='flex flex-wrap align-center justify-end flex-sub'>
            <view v-if="organizationalDetails.addres" class='flex-sub align-center text-cut groupBureau_fd2_0_c1_c0'
              style="width:300rpx">
              {{organizationalDetails.address || '请选择'}}
              <image class='groupBureau_fd2_0_c1_c1' style="transform: translateY(8rpx);" mode="aspectFit"
                :src='STATIC_URL+"73.png"'></image>
            </view>
            <view v-else class='flex-sub align-center text-cut groupBureau_fd2_0_c1_c0'
              style="width:300rpx;color: #999;">
              请选择
              <image class='groupBureau_fd2_0_c1_c1' style="transform: translateY(8rpx);" mode="aspectFit"
                :src='STATIC_URL+"73.png"'></image>
            </view>
            <!--  <benben-input class='flex-sub groupBureau_fd2_0_c1_c0' type="text" :placeholder="`请选择`" confirm-type="done"
              :maxlength="-1" :disabled='true' placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx"
              v-model="organizationalDetails.address" /> -->

          </view>
        </view>
        <view class='flex flex-wrap align-center groupBureau_fd2_0'>
          <text class='groupBureau_fd2_0_c0'>已有人数<text class="text-red">*</text></text>
          <view class='flex flex-wrap align-center justify-end flex-sub'>

            <benben-input class='flex-sub groupBureau_fd2_0_c1_c0' type="number" :placeholder="`请输入`"
              confirm-type="done" :maxlength="10" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx"
              v-model="organizationalDetails.people_num" />
          </view>
        </view>
        <view class='flex flex-wrap align-center groupBureau_fd2_0'>
          <text class='groupBureau_fd2_0_c0'>所需人数<text class="text-red">*</text></text>
          <view class='flex flex-wrap align-center justify-end flex-sub'>

            <benben-input class='flex-sub groupBureau_fd2_0_c1_c0' type="number" :placeholder="`请输入`"
              confirm-type="done" :maxlength="10" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx"
              v-model="organizationalDetails.need_people_num" />
          </view>
        </view>
        <view class='flex flex-wrap align-center groupBureau_fd2_0'>
          <text class='groupBureau_fd2_0_c0'>人均费用($)</text>
          <view class='flex flex-wrap align-center justify-end flex-sub'>
            <benben-input class='flex-sub groupBureau_fd2_0_c1_c0' type="digit" :placeholder="`请输入`" confirm-type="done"
              :maxlength="10" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx"
              v-model="organizationalDetails.money" />
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!--选择时间开始 -->
      <benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1705108003558"
        :value.sync='organizationalDetails.office_time' mode='date' :picker-height='88' :current='true'
        :mask-show='true' fields='minute' :timeout='true' start-year='现在' end-year='2050-12-31' from-data=''>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between groupBureau_picker3_0'>
            <text class='groupBureau_picker3_0_c0' @tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
            <text></text>
            <text class='groupBureau_picker3_0_c2' @tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--选择时间结束 -->
      <!--选择组局类型开始 -->
      <benben-picker ref="benbenWritePickerCodepicker4" :visible.sync="pickerDiy1705107659630"
        :label.sync='organizationalDetails.postofficecate_cate_name' :value.sync='bureau_id' :options='bureauType'
        mode='selector' :mask-show='true' :timeout='true' :picker-height='88' default-type='aid'
        :default-props='{"label":"cate_name","value":"aid"}'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between groupBureau_picker4_0'>
            <text class='groupBureau_picker4_0_c0' @tap="$refs.benbenWritePickerCodepicker4.cancel()">取消</text>
            <text></text>
            <text class='groupBureau_picker4_0_c2' @tap="$refs.benbenWritePickerCodepicker4.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--选择组局类型结束 -->
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center groupBureau_flex_5">
        <button class='groupBureau_fd5_0' @tap.stop="getdetailsFunc()">发布</button>
      </view>

      <!---flex布局flex布局结束-->


    </view>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js';
  import amapFile from '@/libs/amap-wx.js';
  export default {
    components: {},


    data() {
      return {
        "pickerDiy1705107659630": false,
        "pickerDiy1705108003558": false,
        "bureauType": [],
        "bureau_id": "",
        "title": "",
        "content": "",
        "time": "",
        "Address": "",
        "num": "",
        "price": "",
        "bureau_label": "",
        "organizationalDetails": {
          "aid": "",
          "user_nickname": "",
          "postofficecate_cate_name": "",
          "title": "",
          "content": "",
          "people_num": "",
          "money": "",
          "office_time": "",
          "collection_number": "",
          "comment_number": "",
          "address": "",
          "lng": "",
          "lat": "",
          "share_num": "",
          "user_id": "",
          "avatar": "",
          "distance": "",
          "user_school": "",
          "is_collection": "",
          "is_apply": "",
          "know": "",
          "need_people": "",
          "state": "",
          need_people_num: ''
        },
        "aid": "",
        location_lat: '',
        location_lng: '',
        lat: '',
        lng: '',
        address: ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      let {
        aid
      } = options
      if (aid !== undefined) this.aid = aid

      this.myAmapFun = new amapFile.AMapWX({
        key: '63259edc296cb943ffc26c92b77eba63'
      });
      if (aid != '0') {
        this.getDetail()
      }
      this.getgroupFunc()
      // this.getzujuFunc()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      uni.$on('customChooseLocation', res => {
        console.log(res)
        let location = res.name == res.address ? res.address : res.name == '我的位置' ? res.address : res.name + res
          .address
        this.organizationalDetails.address = location
        // this.address =location;
        this.organizationalDetails.lat = res.latitude
        this.organizationalDetails.lng = res.longitude
        // if(res.citys){
        //   this.address = `${res.citys.areap}${res.citys.areac}${res.citys.areax}`;
        // }
      })
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      getDetail() {
        this.$api.post(global.apiUrls.post65c04ef943328, {
          aid: this.aid,
          cate: 2
        }).then(res => {
          if (res.data.code == 1) {
            const objdata = res.data.data
            this.organizationalDetails = objdata
            this.bureau_id = objdata.postofficecate_id
            this.organizationalDetails.postofficecate_cate_name = objdata.postofficecate_name
            console.log('organizationalDetails', this.organizationalDetails.office_time)
          }
        })
      },
      /**
       * @func 地图选点
       */

      chooseLocation() {
        let _this = this
        uni.navigateTo({
          url: `/pages/fabu/choose_address/index`
        })
        return;
        uni.chooseLocation({
          success: (resule) => {
            console.log(resule, '地图');
            _this.location_lng = resule.longitude
            _this.location_lat = resule.latitude
            // _this.location_address = resule.name
            _this.myAmapFun.getRegeo({
              location: resule.longitude + ',' + resule.latitude,
              success: (data) => {
                //成功回调
                let regeoData = data[0].regeocodeData.addressComponent;
                let location_city = regeoData.city.length ? regeoData.city : '';
                let location_province = regeoData.province;
                let location_district = regeoData.district;
                console.log(_this.location_province, '回调');
                this.organizationalDetails.address = location_city + location_province + location_district +
                  resule.name
              },
              fail: (info) => {
                //失败回调
                console.log('info', info)
              }
            })
          }
        })
      },
      //获取组局类型
      async getgroupFunc() {
        //请求方法
        //数据验证

        let databureauType = await this.$api.get(global.apiUrls.post65ade7e5d0a50, {

        });

        if (databureauType.data.code != 1) {
          this.$message.info(databureauType.data.msg);
          return
        }
        let infobureauType = databureauType.data;
        this.bureauType = infobureauType.data

      },
      //发布组局
      async getdetailsFunc() {
        if (!validate(this.organizationalDetails.title, 'require')) {
          this.$message.info('标题不能为空');
          return false;
        }
        if (!validate(this.organizationalDetails.content, 'require')) {
          this.$message.info('内容不能为空');
          return false;
        }
        if (!validate(this.bureau_id, 'require')) {
          this.$message.info('请选择组局类型');
          return false;
        }
        if (!validate(this.organizationalDetails.office_time, 'require')) {
          this.$message.info('请选择组局时间');
          return false;
        }
        // if (!validate(this.organizationalDetails.address, 'require')) {
        //   this.$message.info('组局地点不能为空');
        //   return false;
        // }
        if (!validate(this.organizationalDetails.people_num, 'require')) {
          this.$message.info('已有人数不能为空');
          return false;
        }
        if (!validate(this.organizationalDetails.need_people_num, 'require')) {
          this.$message.info('所需人数不能为空');
          return false;
        }
        // if (!validate(this.organizationalDetails.money, 'require')) {
        //   this.$message.info('费用不能为空');
        //   return false;
        // }
        let dataorganizationalDetails = await this.$api.post(global.apiUrls.post657a97229c8c3, {
          aid: this.aid,
          title: this.organizationalDetails.title,
          content: this.organizationalDetails.content,
          postofficecate_id: this.bureau_id,
          address: this.organizationalDetails.address,
          office_time: this.organizationalDetails.office_time,
          money: this.organizationalDetails.money,
          people_num: this.organizationalDetails.people_num,
          lat: this.organizationalDetails.lat,
          lng: this.organizationalDetails.lng,
          need_people_num: this.organizationalDetails.need_people_num
        });

        if (dataorganizationalDetails.data.code != 1) {
          this.$message.info(dataorganizationalDetails.data.msg);
          return
        }
        let infoorganizationalDetails = dataorganizationalDetails.data;
        this.organizationalDetails = infoorganizationalDetails.data
        if (this.aid != '0') {
          uni.showToast({
            title: '修改成功',
            mask: true,
            icon: 'none',
            duration: 1500
          });
          setTimeout(() => {
            this.$urouter.navigateBack(1);
          }, 500)
        } else {
          this.$urouter.redirectTo(
            `/pages/fabu/publishSubmission/publishSubmission?aid=${infoorganizationalDetails.data.aid}&type=${infoorganizationalDetails.data.type}`
          );
        }

        return;
        if (this.aid == 0) {
          uni.showToast({
            title: '发布成功',
            mask: true,
            icon: 'none',
            duration: 1500
          });
          this.$urouter.navigateTo(
            `/pages/fabu/publishSubmission/publishSubmission?type=2&aid=${this.organizationalDetails.aid}`);
        } else {
          uni.showToast({
            title: '修改成功',
            mask: true,
            icon: 'none',
            duration: 1500
          });
          setTimeout(() => {
            this.$urouter.navigateBack(1);
          }, 500)
        }
      },
      //获取组局
      async getzujuFunc() {
        if (this.aid != 0) {
          //请求方法
          //数据验证

          let dataorganizationalDetails = await this.$api.get(global.apiUrls.post65796a945f387, {
            aid: this.aid,
            lat: '1',
            lng: '1'
          });

          if (dataorganizationalDetails.data.code != 1) {
            this.$message.info(dataorganizationalDetails.data.msg);
            return
          }
          let infoorganizationalDetails = dataorganizationalDetails.data;
          this.organizationalDetails = infoorganizationalDetails.data

        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(255, 255, 255, 1);
    background-size: 100% auto;
  }

  .groupBureau_flex_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .groupBureau_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .groupBureau_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .groupBureau_fd0_0_c0 {
    width: 120rpx;
  }

  .groupBureau_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .groupBureau_flex_1 {
    padding: 40rpx 32rpx 0rpx 32rpx;
  }

  .groupBureau_input_fd1_1_c0 {
    width: 100%;
    height: 248rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333;
    white-space: pre-wrap;
  }

  .groupBureau_fd1_1_c0 {
    width: 678rpx;
    padding: 24rpx 0rpx 24rpx 0rpx;
    color: #333;
    font-size: 28rpx;
  }

  .groupBureau_fd1_1 {
    border-bottom: 1px solid #eee;
    margin: 24rpx 0rpx 0rpx 0rpx;
    padding: 0rpx 0rpx 24rpx 0rpx;
  }

  .groupBureau_fd1_0_c0 {
    height: 56rpx;
    color: rgba(51, 51, 51, 1);
    font-size: 36rpx;
  }

  .groupBureau_flex_2 {
    margin: 24rpx 0rpx 0rpx 0rpx;
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .groupBureau_fd2_0_c1_c1 {
    width: 40rpx;
    height: 40rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    margin: -12rpx 0rpx 0rpx 8rpx;
  }

  .groupBureau_fd2_0_c1_c0 {
    color: #333;
    font-size: 28rpx;
    text-align: right;
  }

  .groupBureau_fd2_0_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .groupBureau_fd2_0 {
    padding: 24rpx 0rpx 24rpx 0rpx;
  }

  .groupBureau_picker3_0_c2 {
    color: rgba(100, 80, 235, 1);
  }

  .groupBureau_picker3_0_c0 {
    color: rgba(191, 191, 191, 1);
  }

  .groupBureau_picker3_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .groupBureau_picker4_0_c2 {
    color: rgba(100, 80, 235, 1);
  }

  .groupBureau_picker4_0_c0 {
    color: rgba(191, 191, 191, 1);
  }

  .groupBureau_picker4_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .groupBureau_flex_5 {
    position: absolute;
    bottom: 48rpx;
    left: 32rpx;
  }

  .groupBureau_fd5_0 {
    background: rgba(100, 80, 235, 1);
    border-radius: 50rpx;
    width: 686rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #fff;
  }
</style>
